import { StyleSheet, TextInput, View, Text, ScrollView, TouchableOpacity, SafeAreaView, Image } from 'react-native';
import { useState,useRef } from 'react';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '../../navigation/types';

export default function RootLayout() {
  const [activeFilter, setActiveFilter] = useState('本校真题');//一级导航当前选中
  const [sideFilter, setSideFilter] = useState('全部');//二级导航当前选中
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  const filters1 = [
    {
      name: '本校真题', list: ['全部', '高等数学', '大学语文', '大学英语', '大学物理', '力学', '概率论与数理统计', '计算机基础', '计算机专业', '材料专业', '电子专业', '机械专业'
        , '土木专业', '建筑专业', '化学专业', '近史公共课', '经管专业', '经济专业', '教育专业', '医学专业', '心里专业', '文学专业', '马原', '毛概', '思修', '其他']
    },
    { name: '英语四级', list: ['全部', '历年真题', '词汇', '写作', '听力', '翻译', '备考经验', '其他'] },
    { name: '课后习题', list: ['全部', '大学数学', '大学英语', '大学物理', '计算机专业', '概率论与数理统计', '马原公开课', '其他'] },
    { name: '实用范文', list: ['全部', 'PPT模板', '论文', '创业策划书', '创业计划书', '大学实习', '档案管理', '读后感', '发言稿', '工作计划', '工作总结', '规章制度', '活动方案', '其他',] },
    { name: '入党申请', list: ['全部', '入党申请书', '思想汇报', '预备党员', '入党资料', '个人自传', '自我鉴定', '简历资料', '党团建设', '其他'] },
    { name: '专升本', list: ['全部', '真题', '模拟卷', '学习资料', '其他'] },
    { name: '教案课件', list: ['全部', '高等数学', '大学英语', '大学物理', '计算机专业', '政治', '其他'] },
    { name: '英语六级', list: ['全部', '词汇', '语法', '翻译', '写作', '听力技巧', '完型技巧', '阅读技巧', '其他'] },
    { name: '计算机二级', list: ['全部', '基础知识', 'Java', 'VB', '其他', '其他'] },
    { name: '热门考试', list: ['全部', '成人考试'] }];
  const [subjects, setSubjects] = useState(['全部', '高等数学', '大学语文', '大学英语', '大学物理', '力学', '概率论与数理统计', '计算机基础', '计算机专业', '材料专业', '电子专业', '机械专业'
    , '土木专业', '建筑专业', '化学专业', '近史公共课', '经管专业', '经济专业', '教育专业', '医学专业', '心里专业', '文学专业', '马原', '毛概', '思修', '其他'])


  const courseList = [
    {
      title: '清华大学《大学英语》2022-2023学年第一学期',
      views: '8.2w',
      downloads: '2062'
    },
    {
      title: '北京大学《计算机基础》2022-2023学年第一学期',
      views: '2.3w',
      downloads: '1022'
    },
    {
      title: '中国人民大学《马克思主义基本原理》2020-2021学年',
      views: '4.5w',
      downloads: '1253'
    },
    {
      title: '复旦大学《大学物理III》2020-2021学年第一学期',
      views: '1.2w',
      downloads: '978'
    },
    {
      title: '中山大学《大学英语》2020-2021学年第一学期',
      views: '1.2w',
      downloads: '1216'
    },
    {
      title: '中国政法大学《马克思主义基本原理》2020-2021第',
      views: '1.1w',
      downloads: '1550'
    }
  ];

  const renderCourseItems = () => {
    return (
      <View style={style.courseContainer}>
        {courseList.map((course, index) => (
          <TouchableOpacity key={index} style={style.courseItem}>
            <View style={style.pdfIconContainer}>
              <View style={style.pdfIcon}>
                <Text style={{ color: '#ff7043' }}>PDF</Text>
              </View>
            </View>
            <View style={style.courseInfo}>
              <Text style={style.courseTitle} numberOfLines={2}>{course.title}</Text>
              <View style={style.courseStats}>
                <View style={style.statItem}>
                  <Text style={style.statIcon}>👁️</Text>
                  <Text style={style.statText}>{course.views}</Text>
                </View>
                <View style={style.statItem}>
                  <Text style={style.statIcon}>⬇️</Text>
                  <Text style={style.statText}>{course.downloads}</Text>
                </View>
              </View>
            </View>
          </TouchableOpacity>
        ))}
      </View>
    );
  };
  return (
    <SafeAreaView style={style.container}>
      {/* 搜索框 */}
      <View style={style.searchTop}>
        <View style={style.searchContainer}>
          <TextInput
            style={style.searchInput}
            placeholder='大学英语'
            onPress={() => {
              navigation.navigate('Search')
            }}
          />
          <TouchableOpacity onPress={() => navigation.navigate('AIWriting')}>
          <Image
            source={require("../../../assets/AILogo.png")} style={style.tinyLogo}
          />
          </TouchableOpacity>
        </View>
      </View>
      {/* 上筛选按钮 */}
      <View style={style.filterDiv}>
        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={style.filterScroll}>
          {filters1.map((filter, index) => (
            <TouchableOpacity
              key={index}
              style={[
                style.filterButton,
                activeFilter === filter.name ? style.activeFilter : null
              ]}
              onPress={() => {
                setActiveFilter(filter.name)
                setSideFilter('全部')
                setSubjects(filter.list)
              }}
            >
              <Text style={style.filterText}>{filter.name}</Text>
            </TouchableOpacity>
          ))}
        </ScrollView>
      </View>
      <View style={style.contentContainer}>
        {/*侧边筛选  */}
        <View style={style.sidebarContainer}>
          <ScrollView showsVerticalScrollIndicator={false}>
            {subjects.map((subject, index) => (
              <TouchableOpacity key={index} style={[style.subjectItem,
              sideFilter === subject ? style.sideFilter : null
              ]}
                onPress={() => setSideFilter(subject)}
              >
                <Text style={style.subjectText}>{subject}</Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>
        <View style={style.mainContentContainer}>
          <View style={style.filterOptions}>
            <TouchableOpacity style={style.filterOption}>
              <Text style={style.filterOptionText}>全部学校 ▼</Text>
            </TouchableOpacity>
            <TouchableOpacity style={style.filterOption}>
              <Text style={style.filterOptionText}>全部年份 ▼</Text>
            </TouchableOpacity>
          </View>
          <View style={style.mainContentContainer1}>
            <ScrollView showsVerticalScrollIndicator={false}>
              {renderCourseItems()}
            </ScrollView>
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
}

const style = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    marginTop: 20
  },
  searchTop: {
    height: 50,
  },
  searchContainer: {
    flex: 1,
    flexDirection: 'row',
    padding: 10,
    backgroundColor: '#f5f5f5',
  },
  tinyLogo: {
    width: 40,
    height: 40,
    marginLeft: 10,
    borderRadius: 10,
  },
  searchInput: {
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 10,
    paddingLeft: 15,
    fontSize: 14,
    height: 40,
    flex: 1,
  },

  filterScroll: {
    flexDirection: 'row',
    paddingVertical: 10,
    paddingHorizontal: 5,
    height: 80,
  },
  filterButton: {
    paddingHorizontal: 15,
    paddingVertical: 10,
    borderRadius: 20,
    marginHorizontal: 5,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    height: 80,
    width: 95,
  },
  activeFilter: {
    backgroundColor: '#e6f7ff',
    borderColor: '#1890ff',
    borderWidth: 1,
    height: 80,
    width: 95,
  },
  filterText: {
    fontSize: 12,
  },
  filterDiv: {
    height: 100,
    width: '100%',
    backgroundColor: 'rgb(241, 245, 246)',
  },
  filterOptions: {
    flexDirection: 'row',
    paddingVertical: 15,
    paddingHorizontal: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  filterOption: {
    marginRight: 20,
  },
  filterOptionText: {
    fontSize: 12,
    color: '#333',
  },
  contentContainer: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#fff',
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#eee',
  },
  sidebarContainer: {
    width: '25%',
    borderRightColor: '#eee',
    backgroundColor: 'rgb(241, 245, 246)',
  },
  mainContentContainer: {
    flex: 1,
  },
  subjectList: {
    flex: 1,
  },
  subjectItem: {
    paddingVertical: 15,
    paddingHorizontal: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    backgroundColor: 'rgb(241, 245, 246)',
    borderRadius: 10,
  },
  sideFilter: {
    backgroundColor: '#fff',
    borderRadius: '',
  },
  subjectText: {
    fontSize: 12,
    color: '#333',
  },
  courseContainer: {
    padding: 10,
  },
  courseItem: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    borderRadius: 8,
    marginBottom: 10,
    padding: 10,
  },
  pdfIconContainer: {
    marginRight: 10,
    justifyContent: 'center',
  },
  pdfIcon: {
    width: 50,
    height: 50,
    backgroundColor: '#ffebee',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },
  courseInfo: {
    flex: 1,
  },
  courseTitle: {
    fontSize: 14,
    color: '#333',
    marginBottom: 10,
  },
  courseStats: {
    flexDirection: 'row',
  },
  statItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 15,
  },
  statIcon: {
    marginRight: 5,
    fontSize: 12,
  },
  statText: {
    fontSize: 12,
    color: '#999',
  },
  input: {
    borderWidth: 1,
    borderColor: "#ccc",
    padding: 10,
    margin: 10,
  },
  mainContentContainer1: {
    marginBottom: 15,
  }
})